<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>

    </title>

    <!--<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>-->
    <!--<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>-->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>

    <style type="text/css">
        #container {
            width: 400px;
            min-height: 200px;
            background-color: lightgreen;
            margin: auto;
            padding: 10px;
            text-align: center;
        }

        li {
            list-style: none;
            text-align: left;
        }
    </style>

    <script id="weather" type="text/html">
        {{if weather}}
        {{each weather as value}}
        <div>
            <span>日期:{{value.date}}</span>
            <ul>
                <li>白天天气:{{value.info.day[1]}}</li>
                <li>白天温度:{{value.info.day[2]}}</li>
                <li>白天天气:{{value.info.day[3]}}</li>
                <li>白天天气:{{value.info.day[4]}}</li>
            </ul>
            <ul>
                <li>夜间天气:{{value.info.night[1]}}</li>
                <li>夜间温度:{{value.info.night[2]}}</li>
                <li>夜间天气:{{value.info.night[3]}}</li>
                <li>夜间天气:{{value.info.night[4]}}</li>
            </ul>
        </div>
        {{/each}}
        {{/if}}
    </script>
    <script type="text/javascript">
        $(function () {
            $("#query").click(function () {
                var code = $("#city").val();
                $.ajax({
                    url: 'http://cdn.weather.hao.360.cn/api_weather_info.php',
                    data: {app: 'hao360', code: code},
                    jsonp: '_jsonp',
                    jsonpCallback: 'abc',
                    dataType: 'jsonp',
                    success: function (data) {
                        var html = template('weather', data);
                        $("#info").html(html);
                    }
                })
            })
        })

    </script>
</head>
<body>

<div id="container">
    <select id="city">
        <option value="101010100">北京</option>
        <option value="101020100">上海</option>
        <option value="101280101">广州</option>
        <option value="101280601">深圳</option>
    </select>
    <input type="button" value="查询" id="query">
    <div id="info"></div>
</div>

<div ng-app="" style="text-align: center">
    <p style="font-size: 18px">请输入姓名: <input type="text" ng-model="name" style="height: 25px" width="100px"></p>
    <h1>Name: {{name}}</h1>

    <p style="font-size: 18px">请输入手机号: <input type="text" ng-model="tel" style="height: 25px" width="100px"></p>
    <h1>Tel: <span ng-bind="tel"> </span></h1>
</div>


<script src="../js/template.js"></script>

<div ng-app="myApp" ng-controller="siteCtrl">

    <ul>
        <li ng-repeat="x in names">
            {{ x.Name + ', ' + x.Country }}
        </li>
    </ul>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('siteCtrl', function ($scope, $http) {
        $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
                .success(function (response) {
                    $scope.names = response.sites;
                })
                .fail(function (response) {
                    $scope.names = response.sites;
                });
    });
</script>

</body>
</html>